
/* 标题组件 - HarmonyOS设计指南实现 */
@import "../base/font.less";
@import "../base/color.less";

/* 标题变量 */
:root {
  --title-line-height: 1.4;
  --title-margin: 0;
  --title-margin-bottom: calc(8 * var(--unit));
  --subtitle-margin-top: calc(4 * var(--unit));
}

/* 主标题样式 */
.title {
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-title);
  color: var(--color-font-primary);
  line-height: var(--title-line-height);
  margin: var(--title-margin);
  margin-bottom: var(--title-margin-bottom);
}

/* 主标题尺寸变体 */
.title-large,
.title.large {
  font-size: var(--font-size-title-large);
  font-weight: var(--font-weight-title);
}

.title-medium,
.title.medium {
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-title);
}

.title-small,
.title.small {
  font-size: var(--font-size-title-small);
  font-weight: var(--font-weight-title);
}

/* 副标题样式 */
.title-sub,
.sub-title {
  font-size: var(--font-size-title-sub-medium);
  font-weight: var(--font-weight-title-sub);
  color: var(--color-font-primary);
  line-height: var(--title-line-height);
  margin: var(--title-margin);
  margin-top: var(--subtitle-margin-top);
}

/* 副标题尺寸变体 */
.title-sub-large,
.title-sub.large,
.sub-title-large,
.sub-title.large {
  font-size: var(--font-size-title-sub-large);
  font-weight: var(--font-weight-title-sub);
}

.title-sub-medium,
.title-sub.medium,
.sub-title-medium,
.sub-title.medium {
  font-size: var(--font-size-title-sub-medium);
  font-weight: var(--font-weight-title-sub);
}

.title-sub-small,
.title-sub.small,
.sub-title-small,
.sub-title.small {
  font-size: var(--font-size-title-sub-small);
  font-weight: var(--font-weight-title-sub);
}

/* 标题颜色变体 */
.title-primary,
.title.primary {
  color: var(--color-font-primary);
}

.title-secondary,
.title.secondary {
  color: var(--color-font-secondary);
}

.title-tertiary,
.title.tertiary {
  color: var(--color-font-tertiary);
}

.title-emphasize,
.title.emphasize {
  color: var(--color-font-emphasize);
}

/* 标题在不同背景上的颜色 */
.title-on,
.title.on,
.title-on-primary,
.title-on.primary,
.title-primary.on,
.title.primary.on {
  color: var(--color-font-on-primary);
}

.title-on-secondary,
.title-on.secondary,
.title-secondary.on,
.title.secondary.on {
  color: var(--color-font-on-secondary);
}

.title-on-tertiary,
.title-on.tertiary,
.title-tertiary.on,
.title.tertiary.on {
  color: var(--color-font-on-tertiary);
}

.title-on-emphasize,
.title-on.emphasize,
.title-emphasize.on,
.title.emphasize.on {
  color: var(--color-font-on-primary);
}

/* 副标题颜色变体 */
.title-sub-primary,
.title-sub.primary,
.sub-title-primary,
.sub-title.primary {
  color: var(--color-font-primary);
}

.title-sub-secondary,
.title-sub.secondary,
.sub-title-secondary,
.sub-title.secondary {
  color: var(--color-font-secondary);
}

.title-sub-tertiary,
.title-sub.tertiary,
.sub-title-tertiary,
.sub-title.tertiary {
  color: var(--color-font-tertiary);
}

.title-sub-emphasize,
.title-sub.emphasize,
.sub-title-emphasize,
.sub-title.emphasize {
  color: var(--color-font-emphasize);
}

/* 副标题在不同背景上的颜色 */
.title-sub-on,
.title-sub.on,
.sub-title-on,
.sub-title.on,
.title-sub-on-primary,
.title-sub-on.primary,
.sub-title-on-primary,
.sub-title-on.primary,
.title-sub-primary.on,
.title-sub.primary.on,
.sub-title-primary.on,
.sub-title.primary.on {
  color: var(--color-font-on-primary);
}

.title-sub-on-secondary,
.title-sub-on.secondary,
.sub-title-on-secondary,
.sub-title-on.secondary,
.title-sub-secondary.on,
.title-sub.secondary.on,
.sub-title-secondary.on,
.sub-title.secondary.on {
  color: var(--color-font-on-secondary);
}

.title-sub-on-tertiary,
.title-sub-on.tertiary,
.sub-title-on-tertiary,
.sub-title-on.tertiary,
.title-sub-tertiary.on,
.title-sub.tertiary.on,
.sub-title-tertiary.on,
.sub-title.tertiary.on {
  color: var(--color-font-on-tertiary);
}

.title-sub-on-emphasize,
.title-sub-on.emphasize,
.sub-title-on-emphasize,
.sub-title-on.emphasize,
.title-sub-emphasize.on,
.title-sub.emphasize.on,
.sub-title-emphasize.on,
.sub-title.emphasize.on {
  color: var(--color-font-on-primary);
}

/* 标题对齐方式 */
.title-left,
.title.left {
  text-align: left;
}

.title-center,
.title.center {
  text-align: center;
}

.title-right,
.title.right {
  text-align: right;
}

.title-justify,
.title.justify {
  text-align: justify;
}

/* 副标题对齐方式 */
.title-sub-left,
.title-sub.left,
.sub-title-left,
.sub-title.left {
  text-align: left;
}

.title-sub-center,
.title-sub.center,
.sub-title-center,
.sub-title.center {
  text-align: center;
}

.title-sub-right,
.title-sub.right,
.sub-title-right,
.sub-title.right {
  text-align: right;
}

.title-sub-justify,
.title-sub.justify,
.sub-title-justify,
.sub-title.justify {
  text-align: justify;
}

/* 标题字体粗细变体 */
.title-bold,
.title.bold {
  font-weight: var(--font-weight-bold);
}

.title-light,
.title.light {
  font-weight: var(--font-weight-light);
}

.title-medium,
.title.medium {
  font-weight: var(--font-weight-medium);
}

.title-regular,
.title.regular {
  font-weight: var(--font-weight-regular);
}

/* 副标题字体粗细变体 */
.title-sub-bold,
.title-sub.bold,
.sub-title-bold,
.sub-title.bold {
  font-weight: var(--font-weight-bold);
}

.title-sub-light,
.title-sub.light,
.sub-title-light,
.sub-title.light {
  font-weight: var(--font-weight-light);
}

.title-sub-medium,
.title-sub.medium,
.sub-title-medium,
.sub-title.medium {
  font-weight: var(--font-weight-medium);
}

.title-sub-regular,
.title-sub.regular,
.sub-title-regular,
.sub-title.regular {
  font-weight: var(--font-weight-regular);
}

/* 标题样式变体 */
.title-italic,
.title.italic {
  font-style: italic;
}

.title-underline,
.title.underline {
  text-decoration: underline;
}

.title-overline,
.title.overline {
  text-decoration: overline;
}

.title-line-through,
.title.line-through {
  text-decoration: line-through;
}

/* 副标题样式变体 */
.title-sub-italic,
.title-sub.italic,
.sub-title-italic,
.sub-title.italic {
  font-style: italic;
}

.title-sub-underline,
.title-sub.underline,
.sub-title-underline,
.sub-title.underline {
  text-decoration: underline;
}

.title-sub-overline,
.title-sub.overline,
.sub-title-overline,
.sub-title.overline {
  text-decoration: overline;
}

.title-sub-line-through,
.title-sub.line-through,
.sub-title-line-through,
.sub-title.line-through {
  text-decoration: line-through;
}

/* 标题行高变体 */
.title-line-height-1,
.title.line-height-1 {
  line-height: 1;
}

.title-line-height-1_2,
.title.line-height-1_2 {
  line-height: 1.2;
}

.title-line-height-1_4,
.title.line-height-1_4 {
  line-height: 1.4;
}

.title-line-height-1_6,
.title.line-height-1_6 {
  line-height: 1.6;
}

.title-line-height-1_8,
.title.line-height-1_8 {
  line-height: 1.8;
}

/* 副标题行高变体 */
.title-sub-line-height-1,
.title-sub.line-height-1,
.sub-title-line-height-1,
.sub-title.line-height-1 {
  line-height: 1;
}

.title-sub-line-height-1_2,
.title-sub.line-height-1_2,
.sub-title-line-height-1_2,
.sub-title.line-height-1_2 {
  line-height: 1.2;
}

.title-sub-line-height-1_4,
.title-sub.line-height-1_4,
.sub-title-line-height-1_4,
.sub-title.line-height-1_4 {
  line-height: 1.4;
}

.title-sub-line-height-1_6,
.title-sub.line-height-1_6,
.sub-title-line-height-1_6,
.sub-title.line-height-1_6 {
  line-height: 1.6;
}

.title-sub-line-height-1_8,
.title-sub.line-height-1_8,
.sub-title-line-height-1_8,
.sub-title.line-height-1_8 {
  line-height: 1.8;
}

/* 标题字符间距变体 */
.title-letter-spacing-sm,
.title.letter-spacing-sm {
  letter-spacing: 1px;
}

.title-letter-spacing-md,
.title.letter-spacing-md {
  letter-spacing: 2px;
}

.title-letter-spacing-lg,
.title.letter-spacing-lg {
  letter-spacing: 4px;
}

/* 副标题字符间距变体 */
.title-sub-letter-spacing-sm,
.title-sub.letter-spacing-sm,
.sub-title-letter-spacing-sm,
.sub-title.letter-spacing-sm {
  letter-spacing: 1px;
}

.title-sub-letter-spacing-md,
.title-sub.letter-spacing-md,
.sub-title-letter-spacing-md,
.sub-title.letter-spacing-md {
  letter-spacing: 2px;
}

.title-sub-letter-spacing-lg,
.title-sub.letter-spacing-lg,
.sub-title-letter-spacing-lg,
.sub-title.letter-spacing-lg {
  letter-spacing: 4px;
}

/* 标题文本转换 */
.title-lowercase,
.title.lowercase {
  text-transform: lowercase;
}

.title-uppercase,
.title.uppercase {
  text-transform: uppercase;
}

.title-capitalize,
.title.capitalize {
  text-transform: capitalize;
}

/* 副标题文本转换 */
.title-sub-lowercase,
.title-sub.lowercase,
.sub-title-lowercase,
.sub-title.lowercase {
  text-transform: lowercase;
}

.title-sub-uppercase,
.title-sub.uppercase,
.sub-title-uppercase,
.sub-title.uppercase {
  text-transform: uppercase;
}

.title-sub-capitalize,
.title-sub.capitalize,
.sub-title-capitalize,
.sub-title.capitalize {
  text-transform: capitalize;
}

/* 可复制标题 */
.title-copyable,
.title.copyable {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: text;
}

.sub-title-copyable,
.sub-title.copyable {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: text;
}

/* 不可选择标题 */
.title-unselectable,
.title.unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.sub-title-unselectable,
.sub-title.unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

